<template>
    <div class="swiper-container visual_swiper1 visual_chart1">
        <div class="swiper-wrapper">
            <div class="swiper-slide" id="main3"></div>
            <div class="swiper-slide" id="main31"></div>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    export default {
        name: "Main3",
        data() {
            return {
                option: {
                    tooltip: {
                        show: true,
                        trigger: "item"
                    },
                    radar: {
                        center: ["50%", "50%"],//偏移位置
                        radius: "80%",
                        startAngle: 40, // 起始角度
                        splitNumber: 4,
                        shape: "circle",
                        splitArea: {
                            areaStyle: {
                                color: 'transparent'
                            }
                        },
                        axisLabel: {
                            show: false,
                            fontSize: 20,
                            color: "#000",
                            fontStyle: "normal",
                            fontWeight: "normal"
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.5)"
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.5)"
                            }
                        },
                        indicator: []
                    },
                    series: [{
                        type: "radar",
                        data:[]
                    }]
                }
            }
        },
        mounted() {
            this.drawLine()
        },
        methods: {
            drawLine() {
                this.initData()
                let main3 = this.$echarts.init(document.getElementById('main3'))
                let main31 = this.$echarts.init(document.getElementById('main31'))
                console.log(this.$data.option.series.data)
                let that = this
                main3.setOption(that.$data.option)
                main31.setOption(that.$data.option)
            },
            initData() {
                var color = ['#e9df3d', '#f79c19', '#21fcd6', '#08c8ff', '#df4131'];
                var data = [
                    {
                        "name": "超速",
                        "value": 30
                    },
                    {
                        "name": "闯红灯",
                        "value": 30
                    },
                    {
                        "name": "闯禁行",
                        "value": 42
                    },
                    {
                        "name": "违停",
                        "value": 50
                    },
                    {
                        "name": "逆行",
                        "value": 34
                    }
                ];

                var max = data[0].value;
                data.forEach(function (d) {
                    max = d.value > max ? d.value : max;
                    // console.log(max)
                });

                var renderData = [{
                    value: [],
                    name: "告警类型TOP5",
                    symbol: 'none',
                    lineStyle: {
                        normal: {
                            color: '#ecc03e',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0,
                                [{
                                    offset: 0,
                                    color: 'rgba(203, 158, 24, 0.8)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(190, 96, 20, 0.8)'
                                }],
                                false)
                        }
                    }
                }];


                data.forEach(function (d, i) {
                    var value = ['', '', '', '', ''];
                    value[i] = max
                    renderData[0].value[i] = d.value;
                    // console.log(max)
                    renderData.push({
                        value: value,
                        symbol: 'circle',
                        symbolSize: 12,
                        lineStyle: {
                            normal: {
                                color: 'transparent'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: color[i],
                            }
                        }
                    })
                })
                var indicator = [];
                data.forEach(function (d) {
                    indicator.push({
                        name: d.name,
                        max: max,
                        color: '#fff'
                    })
                })
                this.$data.option.radar.indicator = indicator
                this.$data.option.series.data = renderData
                // console.log(indicator)
                // console.log(renderData)
                var mySwiper1 = new Swiper('.visual_swiper1', {
                    autoplay: true,//可选选项，自动滑动
                    speed: 800,//可选选项，滑动速度
                    autoplay: {
                        delay: 5000,//1秒切换一次
                    },
                })
            }
        }
    }
</script>

<style scoped>
    @import "../../../assets/css/visual.css";
</style>